import { createRouter, createWebHistory } from "vue-router";
import { staticRoutes } from "./routes";
import pinia from "@/stores/index";
import { useUserInfoStore } from "@/stores/user";
import NProgress from "nprogress";

const userInfoStore = useUserInfoStore(pinia);
const router = createRouter({
  history: createWebHistory(),
  routes: staticRoutes, // 路由模块
  scrollBehavior() {
    return { top: 0, left: 0 }; // 自动回到顶部滚动
  },
});

// 需要登录才能访问的路由列表
const AUTH_LIST = ["Paysuccess", "Trade", "Pay", "Order", "Collect", "ShopCart"];

// 绑定全局路由导航守卫
// 全局前置守卫（路由跳转之前触发）
router.beforeEach((to, from, next) => {
  // 在显示进度条
  NProgress.start();
  // 设置整个页面的标题
  document.title = to.meta.title;
  /*
    to 要去的路由对象
    from 从哪来的路由对象（刷新页面，代表 /）
      路由对象就是$route
    next 是一个函数（必须调用函数）
      调用next函数， 才会完成路由，才会加载渲染路由组件等
      直接调用，next()，跳转到to对应路由
      调用传参，next('/login')  next({ name: 'Login' }), 跳转传参的对应路由
  */

  /*
    希望登录才能访问指定页面
  */
  const token = userInfoStore.initState.token;
  // console.log(token);

  if (AUTH_LIST.includes(to.name)) {
    // 说明，要去的路由是需要登录才能访问的
    if (token) {
      // 有token，就可以访问
      next();
    } else {
      // 没有token，去登录
      next({
        name: "Login",
        query: {
          redirect: to.path,
        },
      });
    }
  } else {
    next();
    // 完成进度条  当次跳转中断了, 要进行一个新的跳转了
    NProgress.done();
  }
});
// 全局解析守卫
// router.beforeResolve((to, from, next) => {
//   console.log("beforeResolve", to, from, next);
//   next();
// });
// 全局后置守卫
// router.afterEach((to, from) => {
//   console.log("afterEach", to, from);
// });
// 路由加载后
router.afterEach(() => {
  NProgress.done();
});

// 导出路由
export default router;
